<template>
	<div class="main-1">
		<div class="input" :class="isMust? 'must' : ''" @click="getFocus">
			<input :maxlength="maxlength" @blur="blurFocus" :focus="isGetFocus" :disabled="isShowRemark" :type="inputType" :placeholder="placeholder" placeholder-style="color:#BCBCBC;padding:0rpx;font-size:28rpx" :value="inputValue" @input="input" />
			<div class="icon down" v-if="showIcon"><image src="/static/icons/arrowright.png" alt=""  /></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isShowRemark:true,
			isGetFocus:false,
		};
	},
	props: {
		label: {
			type: String,
			validator: value => {
				return value.length <= 4;
			}
		},
		isMust: {
			type: Boolean,
			default: () => {
				return false
			}
		},
		inputType: {
			type: String,
			default: () => {
				return 'text';
			}
		},
		placeholder: {
			type: String
		},
		inputValue: String,
		maxlength: {
			type: Number,
			default: () => {
				return -1;
			}
		},
		disabled:{
			type: Boolean,
			default: () => {
				return false;
			}
		},
		
		showIcon: {
			type: Boolean,
			default: () => {
				return false
			}
		},
	},
	watch:{
		
	},
	methods: {
		input(e) {
			this.$emit('input', e.detail.value);
		},
		getFocus(){
			if(this.disabled){
				return false
			}
			this.isShowRemark = false
			
			this.$nextTick(function(){
				this.isGetFocus = true
			})
		},
		blurFocus(e){
			this.isShowRemark = true
			this.$nextTick(function(){
				this.isGetFocus = false
			})
		}
	}
};
</script>

<style scoped lang="scss">
.main-1 {
	width: 100%;
	display: flex;
	align-items: center;
	height: 100upx;
	
	.input {
		width: 100%;
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(28, 28, 28, 0.1);
		font-size: 0;
		height: 100%;
		border-radius: 5upx;
		position: relative;
		z-index: 1;
		input {
			width: 100%;
			height: 100%;
			font-size: 28upx;
			line-height: 1;
			color: #000;
		}
		
	}
}
.must{
	&:after{
		content:"*";
		position:absolute;
		top:50%;
		left: -30rpx;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: rgba(238, 47, 62, 1);
	}
}
/deep/ .uni-input-placeholder{
	color: #999999 !important;
}
.icon {
	width: 18rpx;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	height: 30rpx;
	font-size: 0;
	padding: 20rpx;
	background: #FFFFFF;
	image {
		width: 100%;
		height: 100%;
	}
}
.place{
	font-size: 30upx;
	line-height: 80rpx;
	color: #000;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.noplace{
	color: #999999 !important;
}
</style>
